const app = document.querySelector('#app')

//根据src 新建img元素
const createImg = ()=>{
    return document.createElement('img') 
}

//根据{top,left}为img添加 动态 属性
const render = (dom,top,left)=>{
   dom.style.top = top + 'px'
   dom.style.left = left + 'px'
}



//动态存储数组数据，标记是否按下上下左右，按下则判断是否加入数组（上下一组）（左右一组），因为不可能左右同时都移动，先查到的决定方向
const commands = []

    //上下左右 四个对象
const commandUp = {
    type: 'upAndDown',
    dir: -1,
    id: 1
}
const commandDown = {
    type: 'upAndDown',
    dir: 1,
    id: 2
}
const commandLeft = {
    type: 'leftAndRight',
    dir: -1,
    id: 3
}
const commandRight = {
    type: 'leftAndRight',
    dir: 1,
    id: 4
}

    //根据按键获取  对应的按键对象
const commandMap = {
    ArrowUp: commandUp,
    ArrowDown: commandDown,
    ArrowLeft: commandLeft,
    ArrowRight: commandRight
}


//动态存储状态数据， 标记是否发射，与发射间隔
let status = false
let interval = 20

//存储myBulletsArr数据，表示我的子弹数组 
const myBulletsArr = []



//按下按键 执行函数   目的：根据按键code值更新动态数组（上下左右）,  更新某些状态（空格）
const handleKeyDown = (e)=>{
    const code = e.code
    
    //判断 上下左右
    const command = commandMap[code]
    if(command && !commands.includes(command)){
        commands.push(command)
    }

    //判断 空格
    if(code === 'Space'){
        status = true
    }
}

//弹起按键 执行函数  目的：根据按键code值更新动态数组（上下左右）,  更新某些状态（空格）
const handleKeyUp = (e)=>{
    const code = e.code
    //判断 上下左右
    const command = commandMap[code]
    if(command){
        let index = commands.findIndex((item)=>{
            return  item.id === command.id
        })
        commands.splice(index, 1)
    }

    //判断 空格
    if(code === 'Space'){
        status = false
        interval = 20
    }
}   

//注册window事件
window.addEventListener('keydown', handleKeyDown)
window.addEventListener('keyup', handleKeyUp)